<template>
  <div class="table">
    <el-row class="table-title pl-15">
      <span>{{ title }}</span>
    </el-row>
    <el-row class="table-search pl-15">
      <el-row>
        <el-col :span="6">
          <el-input v-model="searchText" clearable @clear="clearSearch" placeholder="输入录入员/公司名/信用代码查询"></el-input>
        </el-col>
        <el-col :span="15">
          <el-row>
            <el-col :span="2" :offset="1">
              <el-button type="primary" @click="onSearch">查询</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="addSummary">新增</el-button>
            </el-col>
            <el-col :span="2">
              <el-upload action="/managerSystem/importExcel"
                         accept=".xls,.xlsx"
                         class="table-upload"
                         :on-success="handleUpdateSuccess"
                         :on-progress="handleUploadProgress"
                         :show-file-list="false"
              >
                <el-button type="success" v-loading="loading">导入</el-button>
              </el-upload>
            </el-col>
            <el-col :span="2">
              <el-button type="success" @click="exportExcell">导出</el-button>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="3">
          <el-button type="text" @click="downloadTemplate">导入模板下载</el-button>
        </el-col>
      </el-row>
    </el-row>
    <el-row class="table-table">
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          width="50"
          label="序号"></el-table-column>
        <el-table-column
          width="100"
          align="center"
          prop="inputName"
          label="信息录入员">
        </el-table-column>
        <el-table-column
          prop="dealName"
          align="center"
          width="100"
          label="成交人姓名">
        </el-table-column>
        <el-table-column
          prop="companyName"
          width="240"
          align="center"
          label="公司名字">
        </el-table-column>
        <el-table-column
          prop="companyType"
          width="120"
          align="center"
          label="公司类型">
        </el-table-column>
        <el-table-column
          prop="corporationName"
          align="center"
          label="法人姓名">
        </el-table-column>
        <el-table-column
          prop="creditCode"
          width="200"
          align="center"
          label="信用代码">
        </el-table-column>
        <el-table-column
          prop="registMoney"
          width="100"
          align="center"
          label="注册资金/万">
        </el-table-column>
        <el-table-column
          prop="registAddress"
          align="center"
          width="130"
          label="注册地址">
          <template slot-scope="scope">
            <div class="text-rap" :title="scope.row.registAddress">{{scope.row.registAddress}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="registDate"
          align="center"
          width="120"
          label="成立日期">
          <template slot-scope="scope">
            <div >{{scope.row.registDate | toTranceDate}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="years"
          width="100"
          align="center"
          label="年限">
        </el-table-column>
        <el-table-column
          prop="bankState"
          align="center"
          label="银行状态">
        </el-table-column>
        <el-table-column
          prop="cyberState"
          align="center"
          label="网银状态">
        </el-table-column>
        <el-table-column
          prop="buyPrice"
          align="center"
          width="120"
          label="收购价格">
        </el-table-column>
        <el-table-column
          prop="buyDate"
          align="center"
          width="120"
          label="收购日期">
        </el-table-column>
        <el-table-column
          prop="advancePrice"
          align="center"
          width="120"
          label="预售价格">
        </el-table-column>
        <el-table-column
          prop="dealPrice"
          align="center"
          width="120"
          label="成交价格">
        </el-table-column>
        <el-table-column
          prop="buyer"
          align="center"
          label="买家信息">
          <template slot-scope="scope">
            <el-popover
              placement="bottom"
              width="150"
              trigger="click">
              <pre>{{ scope.row.buyer }}</pre>
              <el-button size="mini" type="text"
                         title="只有管理员/录入员/成交员有权限查看"
                         slot="reference"
                         :disabled="!(userObj.username==='admin' ||
               scope.row.inputName===userObj.username ||
                scope.row.dealName===userObj.username)">点击查看</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="seller"
          align="center"
          label="卖家信息">
          <template slot-scope="scope">
            <el-popover
              placement="bottom"
              width="150"
              trigger="click">
              <pre>{{ scope.row.seller }}</pre>
              <el-button size="mini" type="text"
                         title="只有管理员/录入员/成交员有权限查看"
                         slot="reference"
                         :disabled="!(userObj.username==='admin' ||
               scope.row.inputName===userObj.username ||
                scope.row.dealName===userObj.username)">点击查看</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="taxPwd"
          width="100"
          align="center"
          label="国地税密码">
        </el-table-column>
        <el-table-column
          prop="invoiceType"
          width="120"
          align="center"
          label="发票类型">
        </el-table-column>
        <el-table-column
          prop="taxLeval"
          width="110"
          align="center"
          label="企业税务等级">
        </el-table-column>
        <el-table-column
          prop="taxNum"
          align="center"
          label="份数">
        </el-table-column>
        <el-table-column
          prop="ptaxPwd"
          align="center"
          label="个税密码">
        </el-table-column>
        <el-table-column
          prop="saleState"
          align="center"
          label="销售状态">
        </el-table-column>
        <el-table-column
          prop="changeState"
          align="center"
          label="变更状态">
        </el-table-column>
        <el-table-column
          prop="remark"
          align="center"
          label="备注">
          <template slot-scope="scope">
            <el-popover
              placement="bottom"
              width="300"
              trigger="click">
              <!--<el-input disabled type="textarea" :autosize="{minSize: 6}" v-model="scope.row.remark"></el-input>-->
              <pre>{{ scope.row.remark }}</pre>
              <el-button size="mini" type="text" slot="reference">查看备注</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="informationList"
          align="center"
          label="资料清单">
          <template slot-scope="scope">
            <el-popover
              placement="bottom"
              width="300"
              trigger="click">
              <!--<el-input disabled type="textarea" :autosize="{minSize: 6}" v-model="scope.row.informationList"></el-input>-->
              <pre>{{ scope.row.informationList }}</pre>
              <el-button size="mini" type="text" slot="reference">查看清单</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          width="130"
          label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="lookForm(scope.row)">查看</el-button>
            <el-button type="text" size="mini" @click="deleteSummary(scope.row.creditCode)"
                       title="只有管理员/录入员有权限删除"
                       :disabled="!(userObj.username==='admin' ||
                        scope.row.inputName===userObj.username)">删除</el-button>
            <el-button type="text" size="mini" @click="editorForm(scope.row)"
                       title="只有管理员/录入员有权限编辑"
                       :disabled="!(userObj.username==='admin' ||
                        scope.row.inputName===userObj.username)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <summary-form v-if="visiableDialog"
                    :form="summaryForm"
                    :visible.sync="visiableDialog"
                    :userObj="userObj"
                    :operFlag="operFlag"
                    :formDisable="formDisable"
                    @dialogClose="dialogClose"
                    :title="formTitle"></summary-form>
    </el-row>
    <el-row class="table-table-pagination">
      <el-pagination
        @current-change="onCurrentChange"
        layout="prev, pager, next, jumper"
        :page-size="pageObj.pageSize"
        :current-page="pageObj.page"
        :total="pageObj.total">
      </el-pagination>
    </el-row>
    <!--<app-foot></app-foot>-->
  </div>
</template>

<script>
import api from '../api';
import SummaryForm from '../components/summary-form';
import AppFoot from '../components/app-foot';

export default {
  name: 'table-info',
  components: {AppFoot, SummaryForm},
  props: {
    userObj: Object
  },
  data() {
    return {
      loading: false,
      title: '报表信息',
      formDisable: false,
      operFlag: '',
      formTitle: '',
      visiableDialog: false,
      searchText: '',
      tableData: [],
      summaryForm: {
        inputName: '',
        dealName: '',
        companyName: '',
        companyType: '',
        corporationName: '',
        creditCode: '',
        registMoney: '',
        registAddress: '',
        registDate: '',
        years: '',
        bankState: '',
        cyberState: '',
        buyPrice: '',
        buyDate: '',
        advancePrice: '',
        dealPrice: '',
        buyer: '',
        seller: '',
        taxPwd: '',
        invoiceType: '',
        taxLeval: '',
        taxNum: '',
        ptaxPwd: '',
        saleState: '',
        changeState: '',
        remark: '',
        informationList: ''
      },
      pageObj: {
        page: 1,
        pageSize: 7,
        total: 0
      }
    };
  },
  created() {
    this.init();
  },
  filters: {
    toTranceDate(date) {
      return date.replace(/\./g, '-');
    }
  },
  methods: {
    init() {
      api.findAllSummaryTable(this.pageObj).then((summaryTable) => {
        this.tableData = summaryTable.data;
        this.pageObj.total = summaryTable.total;
      });
    },
    dialogClose() {
      this.init();
    },
    clearSearch() {
      this.init();
    },
    exportExcell() {
      // api.exportExcell().then(() => {
      //   this.$message({
      //     type: 'success',
      //     message: '导出成功'
      //   });
      // });
      window.location.href = '/managerSystem/exportExcell';
    },
    lookForm(form) {
      this.operFlag = 'look';
      this.formTitle = '查看记录';
      this.formDisable = true;
      this.summaryForm = form;
      this.visiableDialog = true;
    },
    editorForm(form) {
      this.operFlag = 'update';
      this.formTitle = '更新记录';
      this.formDisable = false;
      this.summaryForm = form;
      this.visiableDialog = true;
    },
    addSummary() {
      this.operFlag = 'add';
      this.formTitle = '新增记录';
      this.formDisable = false;
      this.summaryForm = {
        inputName: this.userObj.username,
        dealName: '',
        companyName: '',
        companyType: '',
        corporationName: '',
        creditCode: '',
        registMoney: '',
        registAddress: '',
        registDate: '',
        years: '',
        bankState: '',
        cyberState: '',
        buyPrice: '',
        buyDate: '',
        advancePrice: '',
        dealPrice: '',
        buyer: '',
        seller: '',
        taxPwd: '',
        invoiceType: '',
        taxLeval: '',
        taxNum: '',
        ptaxPwd: '',
        saleState: '',
        changeState: '',
        remark: '',
        informationList: ''
      };
      this.visiableDialog = true;
    },
    deleteSummary(creditCode) {
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        api.deleteSummary({ creditCode }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功'
          });
          this.init();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    onSearch() {
      if (!this.searchText) {
        this.$message({
          type: 'warning',
          message: '请输入要查询的关键字'
        });
        return;
      }
      this.pageObj.page = 1;
      const params = {
        ...this.pageObj,
        searchText: this.searchText
      };
      api.findSummaryByText(params).then((summaryTable) => {
        this.tableData = summaryTable.data;
        this.pageObj.total = summaryTable.total;
      });
    },
    onCurrentChange(page) {
      this.pageObj.page = page;
      if (this.searchText) {
        const params = {
          ...this.pageObj,
          searchText: this.searchText
        };
        api.findSummaryByText(params).then((summaryTable) => {
          this.tableData = summaryTable.data;
          this.pageObj.total = summaryTable.total;
        });
        return;
      }
      this.init();
    },
    handleUpdateSuccess(data = {}) {
      this.$message({
        type: 'success',
        message: '导入成功'
      });
      this.pageObj.page = 1;
      this.init();
      this.loading = false;
    },
    handleUploadProgress() {
      this.loading = true;
    },
    downloadTemplate() {
      window.location.href = '/managerSystem/getSummaryTableTemplate';
    }
  }
};
</script>

<style scoped lang="scss">
  .pl-15 {
    padding-left: 15px;
  }
  .table {
    height: 100%;
    &-title {
      height: 40px;
      margin: 0 auto;
      width: 98%;
      line-height: 40px;
    }
    &-search {
      height: 60px;
      margin: 0 auto;
      width: 96%;
      line-height: 60px;
      background-color: #F1F2F7;
    }
    &-upload {
      float: left;
    }
    &-table {
      margin: 0 auto;
      margin-top: 15px;
      width: 96%;
      max-height: 68%;
      overflow: auto;
      /*min-height: 60%;*/
      &-pagination {
        margin: 0 auto;
        margin-top: 15px;
        width: 96%;
      }
    }
  }
</style>
